<template>
  <div class="user-box">
    <div class="user-top">
      <div class="user-top-left">
        <el-avatar :size="70" :src="circleUrl" />
      </div>
      <div class="user-top-right">
        <div class="user-top-right-name">
          <div style="margin-right: 10px">
            {{ useinfo.username ? useinfo.username : user.username }}
          </div>
          <div>
            <el-button link @click="handleLogout()">[{{ $t('loginbox.Logout') }}]</el-button>
          </div>
        </div>
        <div style="margin: 4px 0 1px 0">
          {{ $t('loginbox.UserID') }}:

          {{ useinfo.user_id ? useinfo.user_id : user.user_id }}

          {{ $t('loginbox.points') }}：0
        </div>
        <div>
          {{ $t('loginbox.syscoin') }}: {{ useinfo.currency ? useinfo.currency : user.currency }}
        </div>
        <!-- <div class="user-top-right-btn">
          <el-button type="primary" size="small">签到</el-button>
          <el-button type="primary" size="small">绑定fb</el-button>
        </div> -->
      </div>
    </div>
    <div class="user-bottom lasty-play">
      <!-- <div>
        <span>最近在玩:</span>
      </div> -->
      <!-- <div v-for="o in 3" :key="o" class="text item">
        <gameItem :itemData="itemData"> </gameItem>
      </div> -->
    </div>
  </div>
</template>

<script setup>
// logout
import { ref } from 'vue'
import gameItem from './gameItem.vue'
import { useAuth } from '@/use/useAuth'
import { defineEmits } from 'vue'

import { fetUserInfo } from '@/api/game'
const { logout, user, hangdleUserInfo } = useAuth()
const emits = defineEmits(['logoutInfo'])
const props = defineProps({
  useinfo: {
    type: Object,
    default: {}, //advertising  cloud
  },
})

// 获取用户信息
let userInfoData = ref([])

const hangdleFetUserInfo = async () => {
  try {
    let data = await fetUserInfo({})
    console.log(data, 'userInfoData')
    userInfoData.value = data
  } catch (err) {
    console.log(err)
    if (err.code == 400) {
      open()
    }
  }
}

hangdleUserInfo()

const circleUrl = ref(
  'https://img1.baidu.com/it/u=3392894415,1363353941&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1717520400&t=c7b2c22226b7b48721ce5da7b21a788d'
)
const itemData = ref({
  name: '異世界冒險',
  desc: 123123,
  thumbnailUrl:
    'https://img1.baidu.com/it/u=3392894415,1363353941&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1717520400&t=c7b2c22226b7b48721ce5da7b21a788d',
})
const handleLogout = (tab, event) => {
  emits('logoutInfo', {})
  logout()
}
</script>
<style lang="scss" scoped>
.user-box {
  display: flex;
  padding: 10px 10px;
  flex-direction: column;
  // background: #eeeded !important;
  .user-top-right-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    font-weight: 300;
  }

  .user-top {
    display: flex;
    padding: 10px 10px;
    .user-top-left {
    }
    .user-top-right {
      padding-left: 20px;
      .user-top-right-btn {
        margin-top: 6px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .lasty-play {
    font-weight: bold;
  }
}
</style>
